/**
 * 添加查看教师
 */

<template>
            
  <div class="check" v-loading.lock="fullscreenLoading">
    <!-- 基础信息 -->
    <div class="basics">
      <h4>基础信息</h4>
      <div class="basicsContent">
        <el-form
            :inline="true"
            :model="basicsForm"
            :rules="basicsRules"
            class="demo-form-inline"
            ref="ruleForm"
            :disabled="isLookInfo === '2' ? true : false"
            label-width="100px"
            :validate-on-rule-change="false"
          >
          
            <!-- <div class="demo-form-inline1"> -->
              <el-form-item label="姓名：" prop="teacherName">
                <el-input
                  v-model="basicsForm.teacherName"
                  placeholder="姓名"
                  :validate-event="false"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="gender">
                <el-select v-model="basicsForm.gender" placeholder="性别" :validate-event="false">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="民族：" prop="nation">
                <el-select v-model="basicsForm.nation" placeholder="民族" @change="ss" :validate-event="false">
                  <el-option 
                    v-for="item in nation" :key="item.typeId"
                    :label="item.typeName" :value="item.typeId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="证件类型：" prop="identificationType">
                <el-select v-model="basicsForm.identificationType" @change="chss" placeholder="证件类型" :validate-event="false">
                  <el-option 
                    v-for="item in idCard"
                    :key="item.typeId"
                    :label="item.typeName" :value="{value:item.typeId,label:item.typeName}"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="证件号码：" prop="idCardNo">
                <el-input
                  v-model="basicsForm.idCardNo"
                  placeholder="证件号码"
                  :validate-event="false"
                ></el-input>
              </el-form-item>
              <el-form-item label="出生年月：" prop="birthday" class="no_label">
                <div class="block">
                  <el-date-picker
                    v-model="basicsForm.birthday"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
            <!-- </div> -->

            <!-- <div class="fatherAndMother"> -->
              <el-form-item label="学历：" prop="educationalBackground">
                <el-select v-model="basicsForm.educationalBackground" placeholder="学历" :validate-event="false">
                  <el-option label="本科" value="本科"></el-option>
                  <el-option label="专科" value="专科"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系方式：" prop="concact">
                <el-input
                  v-model="basicsForm.concact"
                  placeholder="联系方式"
                  :validate-event="false"
                ></el-input>
              </el-form-item>

              <el-form-item label="邮箱：" prop="email">
                <el-input
                  v-model="basicsForm.email"
                  placeholder="请输入邮箱"
                  :validate-event="false"
                ></el-input>
              </el-form-item>
              <el-form-item label="任职状态：" prop="employmentStatus">
               <el-select v-model="basicsForm.employmentStatus" placeholder="在职" :validate-event="false">
                  <el-option label="在职" value="0"></el-option>
                  <el-option label="离职" value="1"></el-option>
                </el-select>
              </el-form-item>
            <!-- </div> -->

            <div class="area">
              <el-form-item
                label="籍贯："
                class="nativePlace"
                prop="addressProvince"
              >
                <el-select
                  v-model="basicsForm.addressProvince"
                  placeholder="请选择省"
                  @change="getCity"
                  :validate-event="false"
                >
                  <el-option
                    :label="item.areaName"
                    :value="item.areaCode"
                    v-for="(item, index) in provinceList"
                    :key="index"
                  >
                    {{ item.areaName }}
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item class="nativePlace" prop="addressCity">
                <el-select
                  v-model="basicsForm.addressCity"
                  placeholder="请选择市"
                  @change="getArea"
                  :validate-event="false"
                >
                  <el-option
                    :label="item.areaName"
                    :value="item.areaCode"
                    v-for="(item, index) in cityList"
                    :key="index"
                  >
                    {{ item.areaName }}
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item class="nativePlace" prop="addressCounty">
                <el-select
                  v-model="basicsForm.addressCounty"
                  @change="changeAddressCounty"
                  placeholder="请选择区"
                >
                  <el-option
                    :label="item.areaName"
                    :value="item.areaCode"
                    v-for="(item, index) in areaList"
                    :key="index"
                  >
                    {{ item.areaName }}
                  </el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="communicateBox">
              <el-form-item
                label="通讯地址："
                class="communicate"
                prop="nativePlaceProvince"
              >
                <el-select
                  v-model="basicsForm.nativePlaceProvince"
                  placeholder="请选择省"
                  @change="getCommunicateCityListApi"
                >
                  <el-option
                    :label="item.areaName"
                    :value="item.areaCode"
                    v-for="(item, index) in provinceList"
                    :key="index"
                  >
                    {{ item.areaName }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="communicate" prop="nativePlaceCity">
                <el-select
                  v-model="basicsForm.nativePlaceCity"
                  placeholder="请选择市"
                  @change="getCommunicateAreaListApi"
                >
                 <el-option
                    :label="item.areaName"
                    :value="item.areaCode"
                    v-for="(item, index) in communicateCityList"
                    :key="index"
                  >
                    {{ item.areaName }}
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="communicate" prop="nativePlaceCounty"
              :validate-event="false">
                <el-select
                  v-model="basicsForm.nativePlaceCounty"
                  @change="changeNativePlaceCounty"
                  placeholder="请选择区"
                >
                  <el-option
                    :label="item.areaName"
                    :value="item.areaCode"
                    v-for="(item, index) in communicateareaList"
                    :key="index"
                  >
                    {{ item.areaName }}
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item class="communicate" prop="detailedAddress">
                <el-input
                  v-model="basicsForm.detailedAddress"
                  placeholder="请输入详细地址"
                  style="width: 260px"
                  :validate-event="false"
                ></el-input>
              </el-form-item>
            </div>
            
          </el-form>
        <!-- <div class="basicsContentRight">
         <el-upload
            class="avatar-uploader"
            action="/user/profile/avatar"
            name="file"
            :headers="header"
            :show-file-list="false"
            v-loading = "isLoading"
            element-loading-text = "加载中，请稍后..."
            :limit="1"
            :disabled="isLookInfo === '2' ? true : false "
            :before-upload="beforeAvatarUpload">
              <img v-show="imageUrl" :src="imageUrl" class="avatar" />
              <i v-show="!imageUrl" class="el-icon-plus avatar-uploader-icon"></i>
              <div class="text" v-if="!imageUrl">上传头像</div>
          </el-upload>
          <div class="limitImg">只能上传jpg格式</div>
        </div> -->
        <div class="basicsContentRight">
         <el-upload
            class="avatar-uploader"
            action=""
            name="file"
            :show-file-list="false"
            v-loading = "isLoading"
            :on-change="fileChange1"
            :http-request="fileChange"
            :on-success="handleSuccess"
            element-loading-text = "加载中，请稍后..."
            :limit="1"
            ref='upload'
            :disabled="isLookInfo === '2' ? true : false "
            >
            <!-- <img :src="imageUrl" alt=""> -->
              <img v-show="basicsForm.avatar" :src="basicsForm.avatar" class="avatar" />
              <i v-show="!basicsForm.avatar" class="el-icon-plus avatar-uploader-icon"></i>
              <div class="text" v-if="!basicsForm.avatar">上传头像</div>
          </el-upload>
          <div class="limitImg">只能上传jpg格式</div>
        </div>
        
      </div>
    </div>
    <!-- 教师分配 -->
    <div class="study">
      <div class="infoTeacher">
        <h4>教师分配</h4>
        <div class="addPostBox">
          <el-button type="primary" class="addPost" icon="el-icon-plus" @click="addPost">
            新增岗位
          </el-button>
        </div>
      </div>
      <div class="dialog">
     <!-- 添加弹框 -->
      <el-dialog
        title="新增岗位"
        :visible.sync="dialogFormVisible"
        width="730"
        height="400"
         :modal-append-to-body='false'
      >
        <div class="postList">
          <p>岗位名称</p>
          <p>所属院校</p>
          <p>所属专业</p>
          <p>所属班级</p>
        </div>
        <div class="infoPost">
          <div class="postSelect">
          <el-select v-model="postValue" placeholder="岗位名称">
            
              <el-option 
                :label="item.typeName"
                :value="{value:item.typeId,label:item.typeName}"
                v-for="(item, index) in infoPostList"
                :key="index"></el-option>
          </el-select>
        </div>
        <div class="collegeSelect">
          <!-- <el-select v-model="collegeValue" placeholder="所属院校">
              <el-option label="男" value="nan"></el-option>
              <el-option label="女" value="nv"></el-option>
          </el-select> -->
          <el-select
            v-model="saveForm.upResId"
            clearable
            placeholder="所属院校"
            @clear="handleClear"
            ref="selectUpResId"
          >
            <!-- // 设置一个隐藏的下拉选项
        // 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
            <el-option hidden :value="saveForm.upResId" :label="upResName">
            </el-option>
            <!-- // 设置树形组件  
          是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
          // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
            // 节点被点击时的回调 -->
            <el-tree
              :data="treeData"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </el-select>
        </div>
        <div class="major">
          <el-select v-model="majorValue" @change="getMajorId" placeholder="所属专业">
              <el-option v-for="(item,i) in majorOptions" :key="i" :label="item.majorName" :value="{value:item.majorId,label:item.majorName}"></el-option>
          </el-select>
        </div>
        <div class="classSelect">
           <el-select v-model="classValue" @change="changeClass" multiple placeholder="所属班级">
            <el-option
              v-for="item in classOptions"
              :key="item.classId"
              :label="item.className"
              :value="{value:item.classId,label:item.className}">
            </el-option>
          </el-select>
        </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancel" @click="dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button class="determine" type="primary" @click="postDetermine"
            >确 定</el-button
          >
        </div>
        <transition name="fade">
          <p class="message" v-if="isShowMsg">信息不能为空</p>
        </transition>
      </el-dialog>
      <div class="postContent">
        <!-- <div class="postList">
          <p>岗位名称</p>
          <p>所属院校</p>
          <p>所属专业</p>
          <p>所属班级</p>
        </div> -->
        <div class="postBottom">
          <el-table
          ref="multipleTable"
          :data="basicsForm.teacherPosts"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="postName" label="岗位名称"> </el-table-column>
          <el-table-column prop="colleageName" label="所属学院"></el-table-column>
          <el-table-column prop="majorName" label="所属专业"></el-table-column>
          <el-table-column prop="classNames" label="所属班级"></el-table-column>
          
        </el-table>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="footerButton">
      <button class="close" @click="resetForm('ruleForm')">取消</button>
      <button class="confirm" @click="submitForm('ruleForm')">确定</button>
    </div>
    </div>
  </div>
</template>

<script>
import {
  getProvinceListApi,
  getCityListApi,
  getAreaListApi,
} from "@/api/educational/area"
import {
  getTeacherItemApi,
  colleageTreeDataApi,
  majorListApi,
  addTeacherApi,
  editTeacherApi,
  getMajorList,
  getPostListApi,
  // getTeacherPostApi,
  // addPostApi,、
  upLoadImgApi,
  getNationApi
} from "@/api/educational/teacherManagement"
import { getToken } from "@/utils/auth";

export default {
  name:"Addteacher",
  data() {
    return {
      // 展示教室分配table数据
      tableData:[],
      // 图片地址
      imageUrl:'',
      // 多选数据
      classOptions:[],
      // 基础信息
      basicsForm: {
        teacherName: "", // 姓名
        gender: "", // 性别
        nation: "", // 民族
        identificationType: "", // 证件类型
        idCardNo: "", // 证件号码
        birthday: "", // 出生年月
        educationalBackground: "", // 学历
        concact: "", // 联系方式
        email: "", // 邮箱
        employmentStatus: "", // 是否在职
        addressProvince: "", // 籍贯 省
        addressCity: "", // 籍贯 市
        addressCounty: "", // 籍贯 区
        nativePlaceProvince: "", // 通讯地址 省
        nativePlaceCity: "", // 通讯地址 市
        nativePlaceCounty: "", // 通讯地址 区
        detailedAddress: "", // 详细地址
        id:'',
        avatar:'', // 头像
        teacherPosts:[]
      },
      header: {
          ContentType: 'application/x-www-form-urlencoded',
          token: `Bearer ${getToken()}`,
      },

      // 基础信息表单验证
      basicsRules: {
        // 姓名
        teacherName: [
          { required: true, message: "请输入姓名" },
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
        ],
        // 性别
        gender: [{ required: true, message: "请选择性别" }],
        // 民族
        nation: [{ required: true, message: "请选择民族" }],
        // 证件类型
        identificationType: [
          { required: true, message: "请选择证件类型" },
        ],
        // 证件号码
        idCardNo: [
          { required: true, message: "请输入证件号码" },
          { pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur"}
          // {
          //   min: 18,
          //   max: 18,
          //   message: "长度在18个字符",
          // ,
          // },
        ],
        // 学历
        educationalBackground: [
          { required: true, message: "请输入学历" },
        ],
        // 联系方式
        concact: [
          { required: true, message: "请输入联系方式" },
        ],
        // email
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: [ 'change'] }
        ],
        // 是否在职
        employmentStatus: [
          { required: true, message: "请选择状态",trigger: "blur" },
        ],
        // 籍贯 省
        addressProvince: [
          { required: true, message: "请选择省" ,trigger: "blur" },
        ],
        // 籍贯 市
        addressCity: [
          { required: true, message: "请选择市" ,trigger: "blur" },
        ],
        // 籍贯 区
        addressCounty: [
          { required: true, message: "请选择区（县）" ,trigger: "blur" },
        ],
        // 通讯地址 省
        nativePlaceProvince: [
          { required: true, message: "请选择省",trigger: "blur"  },
        ],
        // 通讯地址 市
        nativePlaceCity: [
          { required: true, message: "请选择市",trigger: "blur"  },
        ],
        // 通讯地址 区
        nativePlaceCounty: [
          { required: true, message: "请选择区（县）" ,trigger: "blur" },
        ],
        // 详细地址
        detailedAddress: [
          { required: true, message: "请输入详细地址" ,trigger: "blur" },
        ],
      },
      // 弹框开关
      dialogFormVisible:false,
      // 岗位名称
      postValue:'',
       // 院校名称
      collegeValue:'',
       // 专业名称
      majorValue:[],
       // 班级名称
      classValue:'',
      isShowMsg:false,
      provinceList:[],  //  籍贯省数据
      cityList:[],
      areaList:[],
      isLookInfo:'',  // 1查看   2修改  3 新增
      // 树组件
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeData: [], //  学院树 数据
      saveForm: {
        upResId: "",
      },
      upResName: "", // 学院名称
      majorOptions:[],  // 专业下拉框
      communicateCityList:[], // 通讯地址市
      communicateareaList:[], // 通讯地址区
      majorId:'',  // 专业id
      infoPostList:[],  //  岗位数据
      isLoading:false, // loading
      sheng:{
        value:'',
        label:''
      },
      nation:[], // 民族
      idCard:[],  // 证件类型
      classNames:'',
      postList:[],
      arr:[],
      fullscreenLoading:false  // loading

    };
  },
  watch: {
      '$route':function(newVal){
        console.log(newVal,'----------理由');
        this.isLookInfo = newVal.params.isLookInfo
        console.log(this.isLookInfo);
        console.log(newVal);
        if(this.isLookInfo === '2') {
          console.log(this.$route);
          // this.getTeacherPost()
          if(newVal.path != '/educational/teachermanagement') {
            this.getAddress()
            this.getNativePlace()
            this.lookTeacherInfo(this.$route.params.rowId)
          }
        } else if(this.isLookInfo == '3'){
          this.$refs['ruleForm'].resetFields();
          this.initAddress()
          console.log(3333333);
          // this.getTeacherPost()

        }else {
          console.log(111);
          // this.getCity(this.basicsForm.addressCity)
          if(newVal.path != '/educational/teachermanagement') {
            this.getAddress()
            this.getNativePlace()
            this.lookTeacherInfo(this.$route.params.rowId)
          }
          
          // this.getTeacherPost()

        }
      },
      immediate: true,
      deep: true,
  },
  created() {
    // this.$refs['ruleForm'].resetFields();
  },
  mounted(){
    this.isLookInfo = this.$route.params.isLookInfo
    // 重置表单
    // this.$refs['ruleForm'].resetFields();
    this.$refs['ruleForm'].resetFields();
        this.basicsForm.teacherPosts = JSON.parse(sessionStorage.getItem('postList'))
    console.log(this.basicsForm);
    
    // 请求树组件
    this.colleageTreeData()
    // this.lookTeacherInfo({id:this.$route.params.rowId})
    // if(this.isLookInfo === '3') {
    // }
      getPostListApi({parentId:171}).then(res=>{
        console.log(res);
        this.infoPostList = res.rows
      })
      this.getTeacherPost()
      // console.log(this.tableData)

    if(this.isLookInfo !== '3') {
      this.getNativePlace()
      this.getAddress()
      this.lookTeacherInfo(this.$route.params.rowId)

    }else {
      this.initAddress()
      this.basicsForm.teacherPosts = []
    }
  this.getNationOptions()
  this.getIdCardOptions()
  },
  methods: {
    fileChange(files){
      console.log(12333333);
      let formData = new FormData(); 
            formData.append('file', files.file);
            console.log(files,'htttp------');
            // aa(formData).then((res) => {
            //     console.log(res.data.url);
            //     this.imageUrl = res.data.url
            //     // file.target.url = ''
            //     // document.getElementsByName
            // });
    },
    handleSuccess() {
      this.$refs.upload.clearFiles() //上传成功之后清除历史记录
    },
    fileChange1(files) {
      let formData = new FormData(); 
       formData.append('file', files.raw);
       console.log(files,'----change');
       console.log(this.$refs.upload);
      upLoadImgApi(formData).then((res) => {
          console.log(res.data.url);
          this.basicsForm.avatar = res.data.url
          if(res.code == 200) {
            this.$refs.upload.clearFiles() //上传成功之后清除历史记录
          }
          // file.target.url = ''
          // document.getElementsByName
      });
    },
  
    // 民族
    async getNationOptions() {
      const data = await getNationApi({
        pageNum:1,
        pageSize:56,
        parentId:69
      })
      this.nation = data.rows
    },
    // 证件接口
    async getIdCardOptions() {
      const data = await getNationApi({
        pageNum:1,
        pageSize:10,
        parentId:139
      })
      this.idCard = data.rows
    },
    
    // 通讯地址
    getNativePlace() {
      // getProvinceListApi().then((r)=>{
        // console.log(r,'----------rrrr');
        getTeacherItemApi({id:this.$route.params.rowId}).then((re)=>{
          // console.log(re.teacher.nativePlaceProvinceName);
          if(re.code === 200) {
            if(re.teacher && re.teacher.nativePlaceProvinceName!==null) {
            console.log(re,'=============');
            // 省
            // let nativePlaceProvince = re.teacher !== null ? re.teacher.nativePlaceProvince : {}
            getProvinceListApi(re.teacher.nativePlaceProvince).then(r=>{
              console.log(r,'-----------rrr')
              this.provinceList = r.data
              let filterAreaCity = this.provinceList.filter(item=>{
                return item.areaCode ==re.teacher.nativePlaceProvince
              })
              this.basicsForm.nativePlaceProvince = filterAreaCity[0].areaCode
              // 市
              getCityListApi(re.teacher.nativePlaceProvince).then((res) => {
                this.communicateCityList = res.data
                let filterAreaCity = this.communicateCityList.filter(item=>{
                  return item.areaCode ==re.teacher.nativePlaceCity
                })
                this.basicsForm.nativePlaceCity = filterAreaCity[0].areaCode
              // 区
              getAreaListApi(re.teacher.nativePlaceCity).then((res) => {
                this.communicateareaList = res.data
                let filterArea = this.communicateareaList.filter(item=>{
                  return item.areaCode == re.teacher.nativePlaceCounty
                })
                this.basicsForm.nativePlaceCounty = filterArea[0].areaCode
              });
            });
            })
          }
          }else {
            this.initAddress()
          }
          
        })
      // })
    },
    // // 籍贯
    getAddress() {
        getTeacherItemApi({id:this.$route.params.rowId}).then((re)=>{
          console.log(re,'=============');
            if(re.teacher && re.teacher.addressProvince) {
              console.log(33333333333);
                getProvinceListApi(re.teacher.addressProvince ? re.teacher.addressProvince : {}).then(r=>{
                  console.log(r);
                  this.provinceList = r.data
                  let filterAreaCity = this.provinceList.filter(item=>{
                    return item.areaCode ==re.teacher.addressProvince
                  })
                  this.basicsForm.addressProvince = filterAreaCity[0].areaCode
                  getCityListApi(re.teacher.addressProvince).then((res) => {
                    this.cityList = res.data
                    let filterAreaCity = this.cityList.filter(item=>{
                      return item.areaCode ==re.teacher.addressCity
                    })
                    this.basicsForm.addressCity = filterAreaCity[0].areaCode

                    getAreaListApi(re.teacher.addressCity).then((res) => {
                      this.areaList = res.data
                      let filterArea = this.areaList.filter(item=>{
                        return item.areaCode == re.teacher.addressCounty
                      })
                      this.basicsForm.addressCounty = filterArea[0].areaCode
                    });
                  });
                })
            }else {
              this.initAddress()
            }
        })
      // if(this.isLookInfo === '1') {
      //   getProvinceListApi().then(()=>{
      //     getTeacherItemApi({id:this.$route.params.rowId}).then((re)=>{
      //         getCityListApi(re.tbTeacher.addressProvinceCode).then((res) => {
      //           this.cityList = res.data
      //           let filterAreaCity = this.cityList.filter(item=>{
      //             return item.areaCode == re.tbTeacher.addressCityCode
      //           })
      //           this.basicsForm.addressCity = filterAreaCity[0].areaCode
      //           getAreaListApi(re.tbTeacher.addressCityCode).then((res) => {
      //             this.areaList = res.data
      //             let filterArea = this.areaList.filter(item=>{
      //               return item.areaCode == re.tbTeacher.addressCountyCode
      //             })
      //             this.basicsForm.addressCounty = filterArea[0].areaCode
      //           });
      //         });
      //     })
      //   })
      // }
    },
    // 获取岗位数据
    async getTeacherPost() {
      // const data = await getTeacherPostApi()
      //   this.infoPostList = data
      //   console.log(this.postList,'-------data');
    },
    // 初始化地址
    initAddress() {
      getProvinceListApi().then((res)=>{
        console.log(res,'====');
       
        if(res.code === 200) {
          this.provinceList = res.data
          this.basicsForm.addressProvince = res.data[0].areaCode;
          this.basicsForm.nativePlaceProvince = res.data[0].areaCode;
        }
         
        // 获取市
        getCityListApi(res.data[0].areaCode).then((res) => {
          this.cityList = res.data
          this.communicateCityList = res.data
          // if(this.isLookInfo === '3') {
            this.basicsForm.addressCity = res.data[0].areaCode;
            this.basicsForm.nativePlaceCity = res.data[0].areaCode;
          // }
          
          // 获取区
          getAreaListApi(res.data[0].areaCode).then((res) => {
            this.areaList = res.data
            this.communicateareaList = res.data
            // if(this.isLookInfo === '3') {
              this.basicsForm.addressCounty = res.data[0].areaCode;
              this.basicsForm.nativePlaceCounty = res.data[0].areaCode;
            // }
          });
        });
      })
    },
    // 所属专业下拉框
    async collegesValueHandler(id) {
      const data = await majorListApi({ colleageId: id });
      this.majorOptions = data.rows;
    },

    // 获取专业id
    getMajorId(e) {
      this.majorId = e.value
      getMajorList({majorId:e.value}).then(res=>{
        this.classOptions = res.rows
      })
    },
    // 所属院校下拉框
    async colleageTreeData() {
      const data = await colleageTreeDataApi();
      // console.log(data, "学院管理左侧导航树");
      this.treeData = data.data;
    },
    // 树点击事件
        // select下拉树
    handleNodeClick(data) {
      // console.log(data);
      // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.upResName = data.label;
      this.saveForm.upResId = data.id;
      console.log(data.id)
      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.selectUpResId.blur();
      this.collegesValueHandler(data.id)
      this.majorValue = ''
      this.classValue = ''
      this.classOptions =[]

    },

    chss(val) {
      console.log(val);
    },
    ss(val){
      console.log(val);
    },
    handleClear() {
      // 将选择器的值置空
      this.upResName = "";
      this.saveForm.upResId = "";
      this.majorValue = ''
      this.majorOptions = []
    },
    // 查看教师信息
    lookTeacherInfo(rowId) {
      console.log(rowId);
       getTeacherItemApi({id:rowId}).then((res)=>{
         console.log(res);
        if(res.code == 200) {
          // this.$refs['ruleForm'].resetFields();
          console.log(123);
          // this.tableData = res.teacherInfoList
          if((this.isLookInfo === '1' || this.isLookInfo === '2')) {
            console.log(res,'ssssss');
            this.basicsForm = res.data
            this.basicsForm.nation =Number(res.data.nation) 
            this.basicsForm.identificationType = Number(this.basicsForm.identificationType)
            this.basicsForm.teacherPosts = res.data.teacherPosts ? res.data.teacherPosts : []

            // this.postList = res.data.teacherPosts
            // this.
            console.log(this.basicsForm);
          }else {
            this.basicsForm = {
              teacherName: "", // 姓名
              gender: "", // 性别
              nation: "", // 民族
              identificationType: "", // 证件类型
              idCardNo: "", // 证件号码
              birthday: "", // 出生年月
              educationalBackground: "", // 学历
              concact: "", // 联系方式
              email: "", // 邮箱
              addressProvince: "", // 籍贯 省
              addressCity: "", // 籍贯 市
              addressCounty: "", // 籍贯 区
              nativePlaceProvince: "", // 通讯地址 省
              nativePlaceCity: "", // 通讯地址 市
              nativePlaceCounty: "", // 通讯地址 区
              detailedAddress: "", // 详细地址
              mergeCity:'',
              teacherPosts:[]
            }
            console.log(this.basicsForm);
          }
        }
      })
      
    },

    // 获取市列表
    getCity(val) {
      console.log(val,'----------val');
      // if(this.isLookInfo === '1') {
        let areaFilter = this.provinceList.filter(item=>{
          return item.areaCode === val
        })
        this.basicsForm.addressProvinceName = areaFilter[0].areaName
        getCityListApi(val).then((res) => {
          this.cityList = res.data
          this.basicsForm.addressCity = res.data[0].areaCode;
          this.getArea(res.data[0].areaCode)
        });
      // }
    },

    // 获取区列表
    getArea(val) {
      // 获取区
      console.log(val);
      let areaFilter = this.cityList.filter(item=>{
        return item.areaCode === val
      })
      console.log(areaFilter);
      this.basicsForm.addressCityName = areaFilter[0].areaName

      getAreaListApi(val).then((res) => {
        this.areaList = res.data
        this.basicsForm.addressCounty = res.data[0].areaCode;
      });
    },
    changeAddressCounty(val) {
      let areaFilter = this.areaList.filter(item=>{
        return item.areaCode === val
      })
      console.log(areaFilter);
      this.basicsForm.addressCountyName = areaFilter[0].areaName;
      console.log(this.basicsForm);
    },


    // 通讯地址   市
    getCommunicateCityListApi(val) {
      let areaFilter = this.provinceList.filter(item=>{
        return item.areaCode === val
      })
      this.basicsForm.nativePlaceProvinceName = areaFilter[0].areaName;
      getCityListApi(val).then((res) => {
        this.communicateCityList = res.data
        this.basicsForm.nativePlaceCity = res.data[0].areaCode;
        this.getCommunicateAreaListApi(res.data[0].areaCode)
      });
    },

    // 通讯地址   区
    getCommunicateAreaListApi(val) {
      let areaFilter = this.communicateCityList.filter(item=>{
        return item.areaCode === val
      })
      this.basicsForm.nativePlaceCityName = areaFilter[0].areaName;
      getAreaListApi(val).then((res) => {
        console.log(res);
        this.communicateareaList = res.data
        this.basicsForm.nativePlaceCounty = res.data[0].areaCode;
      });
    },
    changeNativePlaceCounty(val) {
      let areaFilter = this.communicateareaList.filter(item=>{
        return item.areaCode === val
      })
      this.basicsForm.nativePlaceCountyName = areaFilter[0].areaName;
    },
    // 上传图片
    //  handleAvatarSuccess(res, file) {
    //    console.log(file,'----------->imageur1111111;');
    //    console.log(res,'----------->imageur;');
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   console.log(this.imageUrl,'-------------->imageUrl');
    //   if(this.imageUrl) {
    //     this.isLoading = false
    //   }
    // },
    beforeAvatarUpload(file) {
       var img = file.name.substring(file.name.lastIndexOf('.') + 1)
      const suffix = img === 'jpg'
      const suffix2 = img === 'png'
      const suffix3 = img === 'jpeg'
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!suffix && !suffix2 && !suffix3) {
          this.$message.error("只能上传图片！");
          return false
      }
      // 可以限制图片的大小
      if (!isLt1M) {
          this.$message.error('上传图片大小不能超过 1MB!');
      }
      return suffix || suffix2 || suffix3
      // console.log(file,'----------file');
      // this.isLoading = true
      // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 10;
      // console.log(isLt2M);

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error(`上传头像图片大小不能超过 ${isLt2M}MB!`);
      // }
      // return isJPG && isLt2M;
    },

    changeClass(val) {
      let arr = []
      val.forEach(item=>{
        arr.push(item.label)
      })
      this.classNames = arr.join(',')
    },
    // 弹框添加岗位确定按钮
    async postDetermine() {
      console.log(this.classValue);
      // if(this.$route.params.isLookInfo) {
        let obj = {
          postName:this.postValue.label,
          colleageName:this.upResName,
          classNames:this.classNames,
          majorName:this.majorValue.label
        }

        if(obj.postName && obj.colleageName && obj.classNames && obj.majorName) {
          sessionStorage.removeItem('postList')
          let oldObj = sessionStorage.getItem('postList')
          if(oldObj) {
            this.basicsForm.teacherPosts.push(obj,...JSON.parse(oldObj))
          }else {
            console.log(obj);
            console.log(this.basicsForm);
            this.basicsForm.teacherPosts.push(obj)
          }
          console.log(this.basicsForm.teacherPosts);
          console.log(this.basicsForm.teacherPosts);
          sessionStorage.setItem('postList',JSON.stringify(this.basicsForm.teacherPosts))
          this.basicsForm.teacherPosts = JSON.parse(sessionStorage.getItem('postList'))
          this.dialogFormVisible = false
        } else {
          this.$message({
            type: 'error',
            message: '请填写完整信息',
          });
        }
        
        // const data = await addPostApi(obj)
        // editTeacherApi({teacherPosts:obj}).then((res)=>{
        //   console.log(res);
        // })
      // }
      

    },
    // 添加岗位
    addPost() {
    // console.log(this.$route.params);
      this.dialogFormVisible = true
      this.postValue = ''
      this.upResName = ''
      this.saveForm.upResId = ''
      this.classNames = []
      this.majorValue = ''

      console.log(123);
      
    },
    // form表单
    submitForm(formName) {
      console.log(this.basicsForm);
      // this.basicsForm.teacherPosts = this.postList
      console.log(this.basicsForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.isLookInfo == '3') {
            this.fullscreenLoading = true
            addTeacherApi(this.basicsForm).then(res=>{
              if(res.code === 200) {
                this.fullscreenLoading = false
                this.$message({
                  type: 'success',
                  message: '添加成功',
                });
                this.$router.push({
                  path:"/educational/teachermanagement",
                });
              }else {
                this.$message({
                  type: 'error',
                  message: '添加失败',
                });
              }
            })
              
          } else if(this.isLookInfo === '1'){
            editTeacherApi(this.basicsForm).then((res)=>{
              console.log(res);
              if(res.code === 200) {
                this.$router.push({
                  path:"/educational/teachermanagement",
                });
              }else {
                this.$message("请求失败请重试")
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$router.push({
        path:"/educational/teachermanagement",
      });
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.check {
  width: 100%;
  padding: 15px;
  height: 100%;
  overflow-y: auto;

  .basics {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 25px 0 30px 40px;
    min-width: 100vh;
    margin: 0 0 10px 0;
    border-radius: 8px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    h4 {
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      color: #4498e0;
      font-size: 18px;
      border-left: solid 4px #4498e0;
    }
  }

  // 基础信息
  .basics {
    overflow: hidden;
    .basicsContent {
      display: flex;
      margin-top: 20px;
      min-width: 100vh;
    // .demo-form-inline{
    //   display: grid;
    //   grid-template-columns: 400px 400px 400px ;
    //   grid-template-rows: 100px 100px 100px;
    //   // position: relative;
    //   .basicsContentRight{
    //     grid-column-start: 4;
    //     grid-column-end: 2;
    //     grid-row-start: 1;
    //     grid-row-end: 3;
    //   }
    //   flex-direction: column;
    // }
//  ::v-deep .el-form-item {
//    float: left;
//  }
      .basicsContentLeft {
        flex: 1;
        padding-left: 30px;

        .nativePlace {
          ::v-deep .el-select {
            margin-right: 10px;
          }
        }

        .communicateBox {
          ::v-deep .el-form-item {
            margin-bottom: 12px;
            margin-right: 10px;

          }
        }

        .area {
          ::v-deep .el-form-item {
            margin-bottom: 12px;
            margin-right: 0;
          }
        }

        .fatherAndMother {
          ::v-deep .el-input__inner {
            width: 180px;
            height: 32px;
            line-height: 32px;
          }
          ::v-deep .is-required .el-form-item__label{
            margin-top: 0 !important;
          }
          ::v-deep .el-form-item .el-input .el-input__inner{
            height: 30px;
          }
          ::v-deep .el-form-item .el-form-item__label{
            margin-top: 3px;
          }
          // ::v-deep .el-form-item {
          //   display: flex;
          //   align-items: center;
          // }

          ::v-deep .el-form-item {
            margin-bottom: 12px;
            margin-right: 16px;
          }
        }
      }

      .basicsContentRight {
        // width: 280px;
        // display: flex;
        // flex-direction: column;
        margin-right: 100px;
        height: 200px;


         .avatar-uploader ::v-deep .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            .text {
              position: absolute;
              bottom: 30px;
              left: 30%;
              // text-align: center;
              font-size: 18px;
            }
          }
          .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
          }
          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
          }
          .avatar {
            width: 178px;
            height: 178px;
            display: block;
          }
        // .avatar-uploader ::v-deep .el-upload {
        //   border: 1px dashed #d9d9d9;
        //   border-radius: 6px;
        //   cursor: pointer;
        //   position: relative;
        //   overflow: hidden;
        // }
        // .avatar-uploader ::v-deep.el-upload:hover {
        //   border-color: #409EFF;
        // }
        .limitImg{
          text-align: center;
          color: #8c939d;
        }
        // .text{
        //   height: 80px;
        //   margin-top: 10px;
        //   font-size: 16px;
        // }
        // .avatar-uploader-icon {
        //   font-size: 28px;
        //   color: #8c939d;
        //   width: 178px;
        //   height: 50px;
        //   line-height: 178px;
        //   text-align: center;
        // }
        // .avatar {
        //   width: 178px;
        //   height: 178px;
        //   display: block;
        // }

        // span {
        //   color: #cacaca;
        //   margin-top: 10px;
        //   font-size: 14px;
        //   margin-left: 36px;
        // }
      }
    }
  }

  .study {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 25px 0 30px 40px;
    margin: 0 0 10px 0;
    border-radius: 8px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    h4 {
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      color: #4498e0;
      font-size: 18px;
      border-left: solid 4px #4498e0;
    }
    .infoTeacher{
      display: flex;
      height: 40px;
      line-height: 40px;
      justify-content: space-between;
      margin-bottom: 20px;
      .addPostBox{
        width: 267px;
      }
    }
    .postContent {
      width: 100%;
      height: 250px;
      overflow-y: auto;
      .postList{
        height: 50px;
        text-align: center;
        align-items: center;
        display: flex;
        justify-content: space-around;
        font-size: 16px;
        font-weight: 600;
        background-color: #f2f8fb;
      }
      // margin-top: 10px;
      // padding-left: 30px;

      // ::v-deep .el-input__inner {
      //   width: 260px;
      //   height: 32px;
      //   line-height: 32px;
      // }
    }
  }

  
::v-deep .el-dialog {
    width: 730px;
    height: 500px;
    border-radius: 10px;
    font-weight: 600;
    .el-dialog__header {
      border-radius: 10px 10px 0 0;
      text-align: center;
      background-color: rgb(72, 149, 219);
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
      }
    }
    .infoPost{
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
      div{
        width: 150px;
        .el-select .el-input .el-input__inner{
          width: 150px;
        }
      }
    }
    .postList{
      height: 50px;
      text-align: center;
      align-items: center;
      display: flex;
      justify-content: space-around;
      font-size: 16px;
      font-weight: 600;
      background-color: #f2f8fb;
    }

    .el-dialog__body {
      height: 300px;
    }
    .dialog-footer {
      text-align: center;
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
        cursor:pointer;
      }
      .cancel {
        border: none;
        color: #848383;
        background-color: #f0f0f0;
      }
      .determine {
        border: none;
        background-color: #4995dc;
      }
    }
  }
  // 按钮
  .footerButton {
    padding: 30px 0;
    display: flex;
    justify-content: center;

    button {
      width: 105px;
      height: 32px;
      color: #4895db;
      border: solid 1px #4895db;
      border-radius: 20px;
      background-color: #fff;
      cursor:pointer;
    }

    .confirm {
      color: #fff;
      background-color: #4895db;
      margin-left: 40px;
    }
  }
}

::v-deep .el-form--inline .el-form-item__label {
  width: 100px;
}

::v-deep .el-form-item:not(.is-no-asterisk) > .el-form-item__label:before {
  font-size: 20px;
  color: #f56c6c;
  margin: 9px 4px 0 0;
}

::v-deep .el-form-item {
  margin-bottom: 12px;
  margin-right: 45px;
}

::v-deep .el-input__inner {
  // width: 260px;
  height: 32px;
  line-height: 32px;
}

::v-deep .el-form-item__label {
  line-height: 30px;
  display: inline-flex;
  padding: 0;
  align-items: center;
  justify-content: right;
}

.no_label {
  ::v-deep .el-form-item__label {
    line-height: 40px;
  }
}

::v-deep .el-form-item__error {
  padding: 0;
}
</style>